import { Component, OnInit, Input, Output, EventEmitter, HostBinding, HostListener, ChangeDetectionStrategy } from '@angular/core';
import { cardAnim } from '../../animate/card.anim';
@Component({
  selector: 'task-project-item',
  templateUrl: './project-item.component.html',
  styleUrls: ['./project-item.component.scss'],
  animations: [
    cardAnim
  ],
  // 对于笨组件 所有的状态改变都是来自于输入属性 值边他才会变
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class ProjectItemComponent implements OnInit {
  @Input() item;
  // tslint:disable-next-line:no-output-on-prefix
  @Output() onInvite = new EventEmitter<void>();
  @Output() editProject = new EventEmitter<void>();
  @Output() deleteProject = new EventEmitter<void>();
  @HostBinding('@card') cardState = 'out'; // 相当于 [@card]="cardState"
  constructor() { }

  ngOnInit() {
  }
  @HostListener('mouseenter') // HostListener监听鼠标事件
  onmouseenter() {
    this.cardState = 'hover';
  }
  @HostListener('mouseleave')
  onmouseleave() {
    this.cardState = 'out';
  }
  onInviteClick() {
    this.onInvite.emit();
  }
  editClick() {
    this.editProject.emit();
  }
  deleteClick() {
    this.deleteProject.emit();
  }
}
